<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .big{
        width: 100px;
        height: 100px;
        background: red;
      }
      .middle{
        width: 50px;
        height: 50px;
        background: blue;
      }
      .small{
        width: 25px;
        height: 25px;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <div id="app">
      案例一： 按键修饰符
      <hr />
      <div>
        <!-- <input type="text" @keydown.13="fn">  这种写法vue2.x是可以的，但是vue.3.x不行了 -->
        <input type="text" @keydown.enter="fn" />
      </div>

      案例二： 系统修饰符 --- 组合键  <hr>
      <div>
        <input type="text" @keydown.ctrl.alt = "fn">
      </div>
      <hr />

      案例三：事件修饰符  <hr> 
      <!-- stop和self都可以解决事件冒泡的 -->
      <div class="big" @click.stop="bigHandler">
        <div class="middle" @click.stop="middleHandler">
          <div class="small" @click.stop="smallHandler"></div>
        </div>
      </div>
      <div class="big" @click.self="bigHandler">
        <div class="middle" @click.self="middleHandler">
          <div class="small" @click.self="smallHandler"></div>
        </div>
      </div>
      <!--  capture 阻止事件捕获的-->
      <div class="big" @click.capture="bigHandler">
        <div class="middle" @click.capture="middleHandler">
          <div class="small" @click.capture="smallHandler"></div>
        </div>
      </div>

      <!-- prevent 阻止浏览器默认行为 -->
      <a href="" @click.prevent="fn"> 点击 </a>
    </div>
  </body>
  <script src="../../lib/vue.global.js"></script>
  <script>
    /*
        vue3.x中
          1. 修饰符是可以用的
          2. 修饰符分类
             - 事件修饰符
             - 按键修饰符
              - enter
             - 系统修饰符
    */
    Vue.createApp({
      methods: {
        fn() {
          alert("触发");
        },
        bigHandler () {
          alert('big')
        },
        middleHandler () {
          alert('middle')
        },
        smallHandler () {
          alert('small')
        }
      },
    }).mount("#app");
  </script>
</html>
